<template>
    <div id="editRoleMenu">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/RoleManager' }">角色管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色分配权限</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-tree 
            :data="menuList"
            :props="defaultProps"
            show-checkbox
            ref="menuTree"
            node-key="menuId"
            @check="handleCheck"
            default-expand-all>
            </el-tree>
            <el-button type="primary" size="mini" @click="updRoleMenu">更新</el-button>
        </el-card>
    </div>
</template>
<script>
export default {
    name:"EditRoleMenu",
    data(){
        return{
            menuList:[],
            defaultProps:{
                children:"subMenuList",
                label:'menuName',
            },
            roleId:"",
            checkedList:[],
            // getCheckedKeys:[],
          
        }
    },
    methods:{
        //获取所有菜单
        getAllMenuList(){
            this.$axios.post("/menu-info/getAllMenuList").then(res=>{
                console.log(res)
                this.menuList = res.data.data
            })
        },

         //更新角色权限
       updRoleMenu(){
           this.$confirm("确定更新吗？").then(res=>{
               this.$axios.post("/role-menu/updateRoleMenu","roleId="+this.roleId+"&menuIds="+this.checkedList).then(res=>{
                console.log(res)
                  if (res.data.code==200) {
                      this.checkedList = res.data.data.map(v=>v.menuId)
                      let that = this
                      setTimeout(function(){
                       that.checkedList.forEach(value=>{
                        that.$refs.menuTree.setChecked(value ,true ,false)
                       })
                     },200)
                     this.$message.success("角色权限更新成功")
                  }else{
                    this.$message.error(res.data.msg)
                  }
               }).catch(err=>{

               })
           }).catch(err=>{
               this.$message.info("您已取消更新")
           })

       },

        //根据角色id获取角色所有的菜单
       getMenuListByRoleId(){
           var roleId = this.$route.params.roleId
           this.roleId = roleId ;
           this.$axios.post("/role-menu/getMenuListByRoleId" ,"roleId="+roleId).then(res=>{
                console.log(res)
                this.checkedList = res.data.data.map(v=>v.menuId)
                let that = this
                setTimeout(function(){
                    that.checkedList.forEach(value=>{
                        that.$refs.menuTree.setChecked(value ,true ,false)
                    })
                 },200)
               })
        },
         //点击树形结构中的复选框事件
         handleCheck(){
           let checkedKeys = this.$refs.menuTree.getCheckedKeys();
           let halfCheckedKeys = this.$refs.menuTree.getHalfCheckedKeys();
           this.checkedList = checkedKeys.concat(halfCheckedKeys);
           console.log(this.checkedList)
        },
    },
    created(){
        this.getAllMenuList();
        this.getMenuListByRoleId();
        // this.handleCheck();
    }
}
</script>
<style scoped>
.el-breadcrumb{
    margin-bottom: 20px;
}
</style>